<template>
  <div class="about">
    <div class="header">
      <van-search
        v-model="value"
        show-action
        shape="round"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <p style="color: #ccc">热门搜索</p>
      <div class="bottom">
        <button>电脑</button>
        <button>衣服</button>
        <button>鞋</button>
      </div>
      <hr />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    onSearch() {
      console.log(this.value);
    },
  },
};
</script>
<style lang="less" scoped>
.bottom {
  width: 100%;
  button {
    margin-left: 2%;
  }
}
</style>
